<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchFollowUpRecordDetailAPI } from '@/apis/fetchFollowUpRecordDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const loading = ref(false)
const recordId = ref('')
const detail = ref<FollowUpDetail | null>(null)

onLoad(async (options) => {
  if (options && options.id) {
    loading.value = true
    recordId.value = options.id
    const res = await fetchFollowUpRecordDetailAPI(
      { id: options.id },
      userInfoStore.userInfo!.token!,
    )
    if (res.data?.code === 1) {
      detail.value = res.data.data
      loading.value = false
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
      loading.value = false
    }
  }
})

function handleSubscribe() {
  uni.requestSubscribeMessage({
    tmplIds: ['H-Gu6A4sFU8gTgWPAjN4m04CrwLy3JYgHn0bG87sV2E'],
  })
}
</script>

<template>
  <view class="absolute left-0 top-0 h-520rpx w-screen from-#4999F7 to-#78D9FE to-opacity-0 bg-gradient-to-b" />
  <view class="relative z-1">
    <Spacer height="60" />
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <image class="h-42rpx w-42rpx" src="@/static/images/record_outline.png" />
        <Spacer width="16" />
        <view class="text-40rpx text-white font-semibold leading-56rpx">
          {{ detail?.title }}
        </view>
      </view>
    </view>
    <Spacer height="40" />
    <view class="overflow-hidden rounded-20rpx bg-white">
      <ListCell label="复诊时间：" justify="normal">
        <ListValue>
          {{ detail?.again_visit_time }}
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="复诊医生：" justify="normal">
        <ListValue>
          {{ detail?.doctor_name }}
        </ListValue>
      </ListCell>
    </view>
    <Spacer height="24" />
    <Title>复诊档案</Title>
    <Spacer height="24" />
    <view class="rounded-20rpx bg-white p-24rpx">
      <MpHtml :content="detail?.content || '未知内容'" />
    </view>
    <Spacer height="320" />
  </view>
  <button
    class="fixed bottom-0 z-2 h-128rpx w-screen flex items-center justify-center rounded-0 bg-#4999F7 text-32rpx text-white leading-45rpx x-center"
    @tap="handleSubscribe"
  >
    订阅复诊通知
  </button>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'followUpRecordDetail'
style:
  navigationBarTitleText: '就诊详情'
</route>
